<template>
	<view class="charts-box">
		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script setup>
	import {
		defineComponent,
		reactive,
		ref
	} from 'vue';
	import {
		Ren
	} from '@/utils/file.js';
	 // let guangfu = reactive([])
	const chartData = ref({});
	const opts = ref({
		color: ["#ff1158", "#2b5bb4"],
		padding: [15, 15, 0, 5],
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			data: [],
			splitNumber: 6
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
			}
		},
		dataLabel: false // 取消柱状图上的数字
	});

	const getServerData = () => { 
		
		// 柱状图数据
		Ren(uni.getStorageSync("token")).then(response => {
			console.log(response, "人员流量历史");
			// guangfu.push(...[response.data.gailan])
			// console.log(guangfu,"光伏");
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				if (response.data.data.length === 0) {
					console.error('未获取到发电数据');
					return;
				}
				
				// 确认从服务器获取的数据包含 human_time 属性
				const hasMonthProperty = Object.prototype.hasOwnProperty.call(response
					.data.data[0], 'human_time');
				if (!hasMonthProperty) {
					console.error('未找到名为 human_time 的属性');
					return;
				}
				let Date4 = response.data.data.map( 
								item => item.man);
				       
				let max = Math.max(...Date4); // 计算最大值
				// 根据从服务器获取的数据生成 categories 数组
				const categories = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];

				// 生成 chartData 对象，其中 categories 和 series 分别使用上述数组和原始数据生成
				const newChartData = {
					categories,
					series: [{
							name: "男",
							data: response.data.data.map(
								item => item.man)
						},
						{
							name: "女",
							data: response.data.data.map(
								item => item.women)
						}
					]
				};
				opts.value.yAxis.data = [{
				  min: 0,
				  max: Math.ceil(max)
				}];
				chartData.value = JSON.parse(JSON.stringify(newChartData));
			});
		});
	};

	getServerData();

	
</script>

<style>
	.charts-box {
		width: 100%;
		height: 230px;
	}

</style>
